<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>Juicer</title>
	<meta charset=UTF-8>
	<!-- <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	
	<link rel="stylesheet" type="text/css" href="${resRoot}/css/index.css" />
	<script type="text/javascript" src="${resRoot}/js/common/jquery.min.js"></script>
	<script type="text/javascript" src="${resRoot}/js/common/common.js"></script>
	 -->
</head>
<body>
	<script id="tpl" type="text/template">
    <ul>
        {@each list as it,index}
            <li>${it.name} (index: ${index})</li>
        {@/each}
        {@each blah as it}
            <li>
                num: ${it.num} <br />
                {@if it.num==3}
                    {@each it.inner as it2}
                        time: ${it2.time} <br />
                    {@/each}
                {@/if}
            </li>
        {@/each}
    </ul>
	</script>
	<div id="result"></div>
	<script type="text/javascript" src="${resRoot}/js/common/juicer.js"></script>
	<script type="text/javascript">
		var data = {
		    list: [
		        {name:' guokai', show: true},
		        {name:' benben', show: false},
		        {name:' dierbaby', show: true}
		    ],
		    blah: [
		        {num: 1},
		        {num: 2},
		        {num: 3, inner:[
		            {'time': '15:00'},
		            {'time': '16:00'},
		            {'time': '17:00'},
		            {'time': '18:00'}
		        ]},
		        {num: 4}
		    ]
		};

		var tpl = document.getElementById('tpl').innerHTML;
		var html = juicer(tpl, data);
		document.getElementById('result').innerHTML=html;
		//console.info(html);
	</script>
</body>
</html>